<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-card class="box-card">
          <span style="font-size: 25px;">订单详情:</span>
          <br />
          <el-steps :active="active" finish-status="success" simple style="margin-top: 20px">
            <el-step title="待付款"></el-step>
            <el-step title="待发货"></el-step>
            <el-step title="已发货"></el-step>
            <el-step title="交易完成"></el-step>
            <el-step title="交易取消"></el-step>
          </el-steps>
        </el-card>
      </el-col>
    </el-row>
    <el-card
      class="box-card"
      style="margin-top: 20px"
      v-if="orderEntity.state != 5 && orderEntity.state != 1 && orderEntity.state != 2"
    >
      <el-row>
        <div id="container"></div>
      </el-row>
    </el-card>
    <el-row style="margin-top: 10px;">
      <el-col :span="24">
        <el-card class="box-card">
          <el-row>
            <el-col>
              <span style="font-size: 25px;">订单信息:</span>
            </el-col>
            <el-col :span="10" :offset="1" style="margin-top: 10px;">
              <div>收货人信息</div>
              <div class="common-text">收货人：{{ addr.addressName }}</div>
              <div class="common-text">
                收货地址：{{ addr.province }}{{ addr.city }}{{ addr.county
                }}{{ addr.detail }}
              </div>
              <div class="common-text">手机号：{{ addr.addressTel }}</div>
            </el-col>

            <el-col :offset="1" :span="5">
              <div>付款信息</div>
              <div class="common-text">支付方式：{{ showPayMethod(orderEntity.paymentId) }}</div>
              <div class="common-text">商品总额：{{ orderEntity.totalPrice }}</div>
              <div class="common-text">实付金额：{{ orderEntity.actualAmount }}</div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <el-card class="box-card">
      <el-row style="margin-top: 10px;">
        <el-col :span="24">
          <span style="font-size: 25px;">商品详情:</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="productName" label="商品信息" width="180">
            </el-table-column>
            <el-table-column prop="productPrice" label="单价" width="180">
            </el-table-column>
            <el-table-column prop="buyNum" label="数量"> </el-table-column>
            <el-table-column prop="createTime" label="下单时间" >
            </el-table-column>
            <el-table-column prop="" label="实付款">
              <template slot-scope="scope">
                {{everyTotalPrice(scope.row.buyNum, scope.row.productPrice)}}
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row style="margin-top: 20px">
        <el-col :offset="18">
          <div>
            应付总额：
            <span style="font-size: 30px; color: red">{{
              orderEntity.actualAmount
            }}</span>
          </div>
          <div>
            商品总价：
            <span style="font-size: 30px; color: red">{{
              orderEntity.totalPrice
            }}</span>
          </div>
        </el-col>
      </el-row>
      <el-row style="margin-top: 20px">
      <el-col :span="3" :offset="20">
        <el-button icon="el-icon-back" @click="back">返回</el-button>
      </el-col>
    </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 1,
      orderEntity: [],
      addr: [],
      tableData:[{
        buyNum:'',
      }],
      id:'',//订单Id
    };
  },
  methods: {
    back(){
      this.$router.push({ path: "/ZYProductList" });
    },
    updateState(val){
      switch(val){
        case 0:
          this.active = 1;
        case 1:
          this.active = 1;
        case 2:
          this.active = 2;
        case 3:
          this.active = 3;
        case 4:
          this.active = 4;
        case 5:
          this.active = 5;
      }
    },
    everyTotalPrice(buyNum,productPrice){
      return Number(buyNum) * productPrice;
    },
    selOrderDetail(){
      this.$axios.post('api/order-server/selOrderDetail',this.id).then(res=>{
        if(res.data.code==200){
          this.orderEntity=res.data.data.order;
          this.addr=res.data.data.address;
          this.tableData=res.data.data.orderDetails
          // this.tableData=res.data.data.products;
          this.updateState(this.orderEntity.state);
          this.active=this.orderEntity.state;
          console.log(this.tableData);
        }
        console.log(res.data);
      })
    },
    showPayMethod(val) {
      switch (val) {
        case 1:
          return "微信支付";
        case 2:
          return "支付宝支付";
      }
    },
  },
  created(){
    this.id=this.$route.query.id;
    this.selOrderDetail();
  }
};
</script>

<style scoped>
.common-text {
  margin-top: 10px;
}
</style>